import classNames from 'classnames'
import {
  forwardRef,
  useContext,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState
} from 'react'
import Slider from 'react-slick'

import IconFont from '@/components/IconFontAl'
import { uuid } from '@/utils/YunMaiUtils'

import { ModuleTitle } from '../ModuleTitle'
import { ContentTsx } from '../contentTsx'
import type { OrgType, SwitchAndIntervalRef } from '../interface'
import { generateCountArray } from '../utils'
import DisplayBox from './DisplayBox'
import ProportionDataBox from './ProportionDataBox'
import { postOverviewData } from './data'
import association from './images/association.png'
import associationActive from './images/associationActive.png'
import governmentAffairs from './images/government-affairs.png'
import governmentAffairsActive from './images/government-affairsActive.png'
import member from './images/member.png'
import memberActive from './images/memberActive.png'
import organization from './images/organization.png'
import organizationActive from './images/organizationActive.png'
import serviceProviderActive from './images/service-provider-active.png'
import serviceProvider from './images/service-provider.png'

import 'slick-carousel/slick/slick-theme.css'
import 'slick-carousel/slick/slick.css'
import './index.less'

type ProportionData = {
  id: string
  label: string
  proportion: number
}

interface OverviewBoxProps {
  orgType: OrgType
  onChoiceOrg: (orgType: OrgType) => void
}

// 轮播的配置
const settings = {
  dots: false, // 隐藏轮播小圆点
  infinite: true,
  slidesToShow: 5, // 展示5条内容
  slidesToScroll: 1,
  speed: 500, // 滚动动画持续时间
  autoplay: true,
  vertical: true, // 垂直
  autoplaySpeed: 2000, // 停留时间
  pauseOnHover: true, // 鼠标悬浮不暂停
  arrows: false // 隐藏翻页箭头
}

const OverviewBox = forwardRef<SwitchAndIntervalRef, OverviewBoxProps>(
  (props, ref) => {
    const { orgType, onChoiceOrg } = props
    const { selectedAssociationItem } = useContext(ContentTsx)
    const [menberProportionDataList, setMenberProportionDataList] = useState<
      ProportionData[]
    >([])
    const [
      serviceProviderProportionDataList,
      setServiceProviderProportionDataList
    ] = useState<ProportionData[]>([])

    //组织总数
    const [allSum, setAllSum] = useState<number>(0)

    // 政务
    const [zhengWuSum, setZhengWuSum] = useState<number>(0)
    const zhengWuSumRef = useRef<number>(0)
    const [prevZhengWuSum, setPrevZhengWuSum] = useState<number>(0)
    const prevZhengWuSumRef = useRef<number>(0)
    const [endZhengWuSum, setEndZhengWuSum] = useState<number>(0)
    const endZhengWuSumRef = useRef<number>(0)

    //协会
    const [xhSum, setXhSum] = useState<number>(0)
    const xhSumRef = useRef<number>(0)
    const [prevXhSum, setPrevXhSum] = useState<number>(0)
    const prevXhSumRef = useRef<number>(0)
    const [endXhSum, setEndXhSum] = useState<number>(0)
    const endXhSumRef = useRef<number>(0)

    // 会员
    const [hySum, setHySum] = useState<number>(0)
    const hySumRef = useRef<number>(0)
    const [prevHySum, setPrevHySum] = useState<number>(0)
    const prevHySumRef = useRef<number>(0)
    const [endHySum, setEndHySum] = useState<number>(0)
    const endHySumRef = useRef<number>(0)

    // 服务商
    const [fusSum, setFusSum] = useState<number>(0)
    const fusSumRef = useRef<number>(0)
    const [prevFusSum, setPrevFusSum] = useState<number>(0)
    const prevFusSumRef = useRef<number>(0)
    const [endFusSum, setEndFusSum] = useState<number>(0)
    const endFusSumRef = useRef<number>(0)

    // timeout
    const zhengWuSumTimeoutIdRef = useRef<any>()
    const xhSumTimeoutIdRef = useRef<any>()
    const hySumTimeoutIdRef = useRef<any>()
    const fusSumTimeoutIdRef = useRef<any>()

    //数据/时间 分组
    const zhengWuSumUpGroupRef = useRef<{
      countGroup: number[]
      timeGroup: number[]
    }>({
      countGroup: [],
      timeGroup: []
    })

    const xhSumUpGroupRef = useRef<{
      countGroup: number[]
      timeGroup: number[]
    }>({
      countGroup: [],
      timeGroup: []
    })

    const hySumUpGroupRef = useRef<{
      countGroup: number[]
      timeGroup: number[]
    }>({
      countGroup: [],
      timeGroup: []
    })

    const fusSumUpGroupRef = useRef<{
      countGroup: number[]
      timeGroup: number[]
    }>({
      countGroup: [],
      timeGroup: []
    })

    const zhengWuUpGroupIndexRef = useRef<number>(0)
    const xhSumUpGroupIndexRef = useRef<number>(0)
    const hySumUpGroupIndexRef = useRef<number>(0)
    const fusSumUpGroupIndexRef = useRef<number>(0)

    function clearCountUp() {
      if (zhengWuSumTimeoutIdRef.current) {
        clearTimeout(zhengWuSumTimeoutIdRef.current)
      }

      if (xhSumTimeoutIdRef.current) {
        clearTimeout(xhSumTimeoutIdRef.current)
      }

      if (hySumTimeoutIdRef.current) {
        clearTimeout(hySumTimeoutIdRef.current)
      }

      if (fusSumTimeoutIdRef.current) {
        clearTimeout(fusSumTimeoutIdRef.current)
      }
    }

    //组织总数
    const prevAllSum = useMemo(
      () => prevZhengWuSum + prevXhSum + prevHySum + prevFusSum,
      [prevZhengWuSum, prevXhSum, prevHySum, prevFusSum]
    )
    const endAllSum = useMemo(
      () => endZhengWuSum + endXhSum + endHySum + endFusSum,
      [endZhengWuSum, endXhSum, endHySum, endFusSum]
    )

    //政务
    function _recursionZhengWuSumSetStartEndCount(gorupIndex: number) {
      if (gorupIndex > zhengWuSumUpGroupRef.current.countGroup.length - 1) {
        if (zhengWuSumTimeoutIdRef.current) {
          clearTimeout(zhengWuSumTimeoutIdRef.current)
        }
        if (endZhengWuSumRef.current !== zhengWuSumRef.current) {
          console.error(
            `endZhengWuSumRef.current 【${endZhengWuSumRef.current}】!==zhengWuSumRef 【${zhengWuSumRef.current}】`
          )
        }
        return
      }
      const timeoutTime = Math.max(
        1,
        zhengWuSumUpGroupRef.current.timeGroup[gorupIndex] - 1
      ) //CountUp duration需要1s
      if (zhengWuSumTimeoutIdRef.current) {
        clearTimeout(zhengWuSumTimeoutIdRef.current)
      }
      zhengWuSumTimeoutIdRef.current = setTimeout(() => {
        if (gorupIndex === 0) {
          //初始化时是从1开始的，以后每次更新是从0开始的
          prevZhengWuSumRef.current = endZhengWuSumRef.current
        } else if (gorupIndex > 0) {
          prevZhengWuSumRef.current +=
            zhengWuSumUpGroupRef.current.countGroup[gorupIndex - 1]
        }
        setPrevZhengWuSum(prevZhengWuSumRef.current)

        const currEndCount =
          zhengWuSumUpGroupRef.current.countGroup[gorupIndex] +
          prevZhengWuSumRef.current
        endZhengWuSumRef.current = currEndCount

        setEndZhengWuSum(currEndCount)
      }, timeoutTime * 1000)
    }

    const handleZhengWuCountUpEnd = () => {
      zhengWuUpGroupIndexRef.current += 1
      _recursionZhengWuSumSetStartEndCount(zhengWuUpGroupIndexRef.current)
    }

    //协会
    function _recursionXhSumSetStartEndCount(gorupIndex: number) {
      if (gorupIndex > xhSumUpGroupRef.current.countGroup.length - 1) {
        if (xhSumTimeoutIdRef.current) {
          clearTimeout(xhSumTimeoutIdRef.current)
        }
        if (endXhSumRef.current !== xhSumRef.current) {
          console.error(
            `endXhSumRef.current 【${endXhSumRef.current}】!==xhSumRef 【${xhSumRef.current}】`
          )
        }
        return
      }
      const timeoutTime = Math.max(
        1,
        xhSumUpGroupRef.current.timeGroup[gorupIndex] - 1
      ) //CountUp duration需要1s
      if (xhSumTimeoutIdRef.current) {
        clearTimeout(xhSumTimeoutIdRef.current)
      }
      xhSumTimeoutIdRef.current = setTimeout(() => {
        if (gorupIndex === 0) {
          //初始化时是从1开始的，以后每次更新是从0开始的
          prevXhSumRef.current = endXhSumRef.current
        } else if (gorupIndex > 0) {
          prevXhSumRef.current +=
            xhSumUpGroupRef.current.countGroup[gorupIndex - 1]
        }
        setPrevXhSum(prevXhSumRef.current)

        const currEndCount =
          xhSumUpGroupRef.current.countGroup[gorupIndex] + prevXhSumRef.current
        endXhSumRef.current = currEndCount

        setEndXhSum(currEndCount)
      }, timeoutTime * 1000)
    }

    const handleXhCountUpEnd = () => {
      xhSumUpGroupIndexRef.current += 1
      _recursionXhSumSetStartEndCount(xhSumUpGroupIndexRef.current)
    }

    //会员
    function _recursionHySumSetStartEndCount(gorupIndex: number) {
      if (gorupIndex > hySumUpGroupRef.current.countGroup.length - 1) {
        if (hySumTimeoutIdRef.current) {
          clearTimeout(hySumTimeoutIdRef.current)
        }
        if (endHySumRef.current !== hySumRef.current) {
          console.error(
            `endHySumRef.current 【${endHySumRef.current}】!==hySumRef 【${hySumRef.current}】`
          )
        }
        return
      }
      const timeoutTime = Math.max(
        1,
        hySumUpGroupRef.current.timeGroup[gorupIndex] - 1
      ) //CountUp duration需要1s
      if (hySumTimeoutIdRef.current) {
        clearTimeout(hySumTimeoutIdRef.current)
      }
      hySumTimeoutIdRef.current = setTimeout(() => {
        if (gorupIndex === 0) {
          //初始化时是从1开始的，以后每次更新是从0开始的
          prevHySumRef.current = endHySumRef.current
        } else if (gorupIndex > 0) {
          prevHySumRef.current +=
            hySumUpGroupRef.current.countGroup[gorupIndex - 1]
        }
        setPrevHySum(prevHySumRef.current)

        const currEndCount =
          hySumUpGroupRef.current.countGroup[gorupIndex] + prevHySumRef.current
        endHySumRef.current = currEndCount

        setEndHySum(currEndCount)
      }, timeoutTime * 1000)
    }

    const handleHyCountUpEnd = () => {
      hySumUpGroupIndexRef.current += 1
      _recursionHySumSetStartEndCount(hySumUpGroupIndexRef.current)
    }

    //服务商
    function _recursionFusSumSetStartEndCount(gorupIndex: number) {
      if (gorupIndex > fusSumUpGroupRef.current.countGroup.length - 1) {
        if (fusSumTimeoutIdRef.current) {
          clearTimeout(fusSumTimeoutIdRef.current)
        }
        if (endFusSumRef.current !== fusSumRef.current) {
          console.error(
            `endFusSumRef.current 【${endFusSumRef.current}】!==fusSumRef 【${fusSumRef.current}】`
          )
        }
        return
      }
      const timeoutTime = Math.max(
        1,
        fusSumUpGroupRef.current.timeGroup[gorupIndex] - 1
      ) //CountUp duration需要1s
      if (fusSumTimeoutIdRef.current) {
        clearTimeout(fusSumTimeoutIdRef.current)
      }
      fusSumTimeoutIdRef.current = setTimeout(() => {
        if (gorupIndex === 0) {
          //初始化时是从1开始的，以后每次更新是从0开始的
          prevFusSumRef.current = endFusSumRef.current
        } else if (gorupIndex > 0) {
          prevFusSumRef.current +=
            fusSumUpGroupRef.current.countGroup[gorupIndex - 1]
        }
        setPrevFusSum(prevFusSumRef.current)

        const currEndCount =
          fusSumUpGroupRef.current.countGroup[gorupIndex] +
          prevFusSumRef.current
        endFusSumRef.current = currEndCount

        setEndFusSum(currEndCount)
      }, timeoutTime * 1000)
    }

    const handleFusCountUpEnd = () => {
      fusSumUpGroupIndexRef.current += 1
      _recursionFusSumSetStartEndCount(fusSumUpGroupIndexRef.current)
    }

    //初始化/切换协会时 获取数据
    function _initialOrSwitchAssociation(
      type: 'inital' | 'switchAssociation',
      associationKey: string
    ) {
      if (type === 'switchAssociation') {
        clearCountUp()
        //组织总数
        setAllSum(0)

        // 政务
        setZhengWuSum(0)
        zhengWuSumRef.current = 0
        setPrevZhengWuSum(0)
        prevZhengWuSumRef.current = 0
        setEndZhengWuSum(0)
        endZhengWuSumRef.current = 0

        //协会
        setXhSum(0)
        xhSumRef.current = 0
        setPrevXhSum(0)
        prevXhSumRef.current = 0
        setEndXhSum(0)
        endXhSumRef.current = 0

        // 会员
        setHySum(0)
        hySumRef.current = 0
        setPrevHySum(0)
        prevHySumRef.current = 0
        setEndHySum(0)
        endHySumRef.current = 0

        // 服务商
        setFusSum(0)
        fusSumRef.current = 0
        setPrevFusSum(0)
        prevFusSumRef.current = 0
        setEndFusSum(0)
        endFusSumRef.current = 0

        //数据/时间 分组
        zhengWuSumUpGroupRef.current = {
          countGroup: [],
          timeGroup: []
        }

        xhSumUpGroupRef.current = {
          countGroup: [],
          timeGroup: []
        }

        hySumUpGroupRef.current = {
          countGroup: [],
          timeGroup: []
        }

        fusSumUpGroupRef.current = {
          countGroup: [],
          timeGroup: []
        }

        zhengWuUpGroupIndexRef.current = 0
        xhSumUpGroupIndexRef.current = 0
        hySumUpGroupIndexRef.current = 0
        fusSumUpGroupIndexRef.current = 0
      }
      postOverviewData({ entId: associationKey })
        .then((data) => {
          const {
            allSum = 0,
            zhengWuSum = 0,
            xhSum = 0,
            hySum = 0,
            fusSum = 0,
            fusKvs = [],
            hyKvs = []
          } = data

          const updatedMenberProportionDataList = hyKvs.map((item, index) => {
            return {
              id: `${uuid()}-${index}`,
              label: item.name,
              proportion: item.piont
            }
          })

          const updatedServiceProviderProportionDataList = fusKvs.map(
            (item, index) => {
              return {
                id: `${uuid()}-${index}`,
                label: item.name,
                proportion: item.piont
              }
            }
          )

          setAllSum(allSum)
          setZhengWuSum(zhengWuSum)
          zhengWuSumRef.current = zhengWuSum
          setXhSum(xhSum)
          xhSumRef.current = xhSum
          setHySum(hySum)
          hySumRef.current = hySum
          setFusSum(fusSum)
          fusSumRef.current = fusSum

          setMenberProportionDataList(updatedMenberProportionDataList)
          setServiceProviderProportionDataList(
            updatedServiceProviderProportionDataList
          )

          if (zhengWuSum > 0) {
            endZhengWuSumRef.current = zhengWuSum
            setEndZhengWuSum(zhengWuSum)
          }

          if (xhSum > 0) {
            endXhSumRef.current = xhSum
            setEndXhSum(xhSum)
          }

          if (hySum > 0) {
            endHySumRef.current = hySum
            setEndHySum(hySum)
          }

          if (fusSum > 0) {
            endFusSumRef.current = fusSum
            setEndFusSum(fusSum)
          }
        })
        .catch((err: any) => {
          console.error(
            '--OverviewBox--_initialOrSwitchAssociation--postOverviewData--err--:',
            err
          )
        })
    }

    //5分钟刷新
    function _intervalRefresh() {
      clearCountUp()
      postOverviewData({ entId: selectedAssociationItem.key })
        .then((data) => {
          const {
            allSum = 0,
            zhengWuSum = 0,
            xhSum = 0,
            hySum = 0,
            fusSum = 0,
            fusKvs = [],
            hyKvs = []
          } = data

          const updatedMenberProportionDataList = hyKvs.map((item, index) => {
            return {
              id: `${uuid()}-${index}`,
              label: item.name,
              proportion: item.piont
            }
          })

          const updatedServiceProviderProportionDataList = fusKvs.map(
            (item, index) => {
              return {
                id: `${uuid()}-${index}`,
                label: item.name,
                proportion: item.piont
              }
            }
          )

          setAllSum(allSum)
          setZhengWuSum(zhengWuSum)
          zhengWuSumRef.current = zhengWuSum
          setXhSum(xhSum)
          xhSumRef.current = xhSum
          setHySum(hySum)
          hySumRef.current = hySum
          setFusSum(fusSum)
          fusSumRef.current = fusSum

          setMenberProportionDataList(updatedMenberProportionDataList)
          setServiceProviderProportionDataList(
            updatedServiceProviderProportionDataList
          )

          const zhengWuSumDiff = zhengWuSum - endZhengWuSumRef.current
          if (zhengWuSumDiff === 0) {
            return
          } else {
            zhengWuUpGroupIndexRef.current = 0
            zhengWuSumUpGroupRef.current = generateCountArray(
              endZhengWuSumRef.current,
              zhengWuSum
            )
            if (zhengWuSumDiff < 0) {
              zhengWuSumUpGroupRef.current = {
                countGroup: zhengWuSumUpGroupRef.current.countGroup.map(
                  (count) => count * -1
                ),
                timeGroup: zhengWuSumUpGroupRef.current.timeGroup
              }
            }
            _recursionZhengWuSumSetStartEndCount(zhengWuUpGroupIndexRef.current)
          }

          const xhSumDiff = xhSum - endXhSumRef.current
          if (xhSumDiff === 0) {
            return
          } else {
            xhSumUpGroupIndexRef.current = 0
            xhSumUpGroupRef.current = generateCountArray(
              endXhSumRef.current,
              xhSum
            )
            if (xhSumDiff < 0) {
              xhSumUpGroupRef.current = {
                countGroup: xhSumUpGroupRef.current.countGroup.map(
                  (count) => count * -1
                ),
                timeGroup: xhSumUpGroupRef.current.timeGroup
              }
            }
            _recursionXhSumSetStartEndCount(xhSumUpGroupIndexRef.current)
          }

          const hySumDiff = hySum - endHySumRef.current
          if (hySumDiff === 0) {
            return
          } else {
            hySumUpGroupIndexRef.current = 0
            hySumUpGroupRef.current = generateCountArray(
              endHySumRef.current,
              hySum
            )
            if (hySumDiff < 0) {
              hySumUpGroupRef.current = {
                countGroup: hySumUpGroupRef.current.countGroup.map(
                  (count) => count * -1
                ),
                timeGroup: hySumUpGroupRef.current.timeGroup
              }
            }
            _recursionHySumSetStartEndCount(hySumUpGroupIndexRef.current)
          }

          const fusSumDiff = fusSum - endFusSumRef.current
          if (fusSumDiff === 0) {
            return
          } else {
            fusSumUpGroupIndexRef.current = 0
            fusSumUpGroupRef.current = generateCountArray(
              endFusSumRef.current,
              fusSum
            )
            if (fusSumDiff < 0) {
              fusSumUpGroupRef.current = {
                countGroup: fusSumUpGroupRef.current.countGroup.map(
                  (count) => count * -1
                ),
                timeGroup: fusSumUpGroupRef.current.timeGroup
              }
            }
            _recursionFusSumSetStartEndCount(fusSumUpGroupIndexRef.current)
          }
        })
        .catch((err) => {
          console.error(
            '--OverviewBox--_intervalRefresh--postOverviewData--err--:',
            err
          )
        })
    }

    useImperativeHandle(ref, () => ({
      switchAssociation: (newAssociationId) => {
        _initialOrSwitchAssociation('switchAssociation', newAssociationId)
      },
      intervalRefresh: _intervalRefresh
    }))

    useEffect(() => {
      _initialOrSwitchAssociation('inital', selectedAssociationItem.key)
      return () => {
        clearCountUp()
      }
    }, [])

    const widthDetail = useMemo<{
      displayBoxWidth: number
      extraBoxWidth: number
      stepList: { orgType: OrgType; width: number }[]
    }>(() => {
      const isPlatform = selectedAssociationItem.operateEntFlag === 'platform'
      const displayBoxWidth = isPlatform ? 137 : 206
      const extraBoxWidth = isPlatform ? 280 : 346
      const stepList: { orgType: OrgType; width: number }[] = [
        { orgType: '-1', width: displayBoxWidth },
        { orgType: '1', width: displayBoxWidth },
        { orgType: '2', width: displayBoxWidth },
        { orgType: '3', width: extraBoxWidth }
      ]
      return {
        displayBoxWidth,
        extraBoxWidth,
        stepList
      }
    }, [selectedAssociationItem.operateEntFlag])

    return (
      <>
        <ModuleTitle title="组织数据分析" />
        <div className="section1-view-box">
          <DisplayBox
            iconPath={orgType === '-1' ? organizationActive : organization}
            count={allSum}
            label="组织互联总数"
            prevCount={prevAllSum}
            endCount={endAllSum}
            width={widthDetail.displayBoxWidth}
            onDisplayBoxClick={() => {
              onChoiceOrg(orgType === '-1' ? undefined : '-1')
            }}
          />
          <DisplayBox
            iconPath={
              orgType === '1' ? governmentAffairsActive : governmentAffairs
            }
            count={zhengWuSum}
            label="政务联动"
            prevCount={prevZhengWuSum}
            endCount={endZhengWuSum}
            onCountUpEnd={handleZhengWuCountUpEnd}
            width={widthDetail.displayBoxWidth}
            onDisplayBoxClick={() => {
              onChoiceOrg(orgType === '1' ? undefined : '1')
            }}
          />
          <DisplayBox
            iconPath={orgType === '2' ? associationActive : association}
            count={xhSum}
            label="协会互联"
            prevCount={prevXhSum}
            endCount={endXhSum}
            onCountUpEnd={handleXhCountUpEnd}
            width={widthDetail.displayBoxWidth}
            onDisplayBoxClick={() => {
              onChoiceOrg(orgType === '2' ? undefined : '2')
            }}
          />
          <div
            style={{
              display: 'flex',
              flexFlow: 'row nowrap',
              justifyContent: 'center',
              width: widthDetail.extraBoxWidth
            }}
          >
            <DisplayBox
              width={80}
              iconPath={orgType === '3' ? memberActive : member}
              count={hySum}
              label="会员单位"
              prevCount={prevHySum}
              endCount={endHySum}
              onCountUpEnd={handleHyCountUpEnd}
              onDisplayBoxClick={() => {
                onChoiceOrg(orgType === '3' ? undefined : '3')
              }}
            />
            <div
              style={{ display: 'flex', alignItems: 'center' }}
              onClick={() => {
                onChoiceOrg(orgType === '3' ? undefined : '3')
              }}
            >
              <div style={{ textAlign: 'center' }}>
                <IconFont type="icon-xiangyou" style={{ color: '#34725E' }} />
              </div>
              <div
                style={{
                  marginLeft: 4,
                  height: 112,
                  width: 150,
                  display: 'flex',
                  overflow: 'hidden',
                  justifyContent: 'center',
                  flexDirection: 'column',
                  rowGap: 2
                }}
              >
                {menberProportionDataList.length > 0 ? (
                  <>
                    {menberProportionDataList.length <= 5 ? (
                      menberProportionDataList.map((item) => {
                        return (
                          <ProportionDataBox
                            label={item.label}
                            value={item.proportion}
                            key={item.id}
                          />
                        )
                      })
                    ) : (
                      <Slider {...settings}>
                        {menberProportionDataList.map((item) => {
                          return (
                            <ProportionDataBox
                              label={item.label}
                              value={item.proportion}
                              key={item.id}
                            />
                          )
                        })}
                      </Slider>
                    )}
                  </>
                ) : (
                  <span className="dr_label">暂无数据</span>
                )}
              </div>
            </div>
          </div>

          {selectedAssociationItem.operateEntFlag === 'platform' && (
            <div
              style={{
                display: 'flex',
                flexFlow: 'row nowrap',
                justifyContent: 'center',
                width: widthDetail.extraBoxWidth
              }}
            >
              <DisplayBox
                width={80}
                iconPath={
                  orgType === '4' ? serviceProviderActive : serviceProvider
                }
                count={fusSum}
                label="服务商"
                prevCount={prevFusSum}
                endCount={endFusSum}
                onCountUpEnd={handleFusCountUpEnd}
                onDisplayBoxClick={() => {
                  onChoiceOrg(orgType === '4' ? undefined : '4')
                }}
              />
              <div
                style={{ display: 'flex', alignItems: 'center' }}
                onClick={() => {
                  onChoiceOrg(orgType === '4' ? undefined : '4')
                }}
              >
                <div style={{ textAlign: 'center' }}>
                  <IconFont type="icon-xiangyou" style={{ color: '#34725E' }} />
                </div>
                <div
                  style={{
                    marginLeft: 4,
                    height: 112,
                    width: 150,
                    display: 'flex',
                    overflow: 'hidden',
                    justifyContent: 'center',
                    flexDirection: 'column',
                    rowGap: 2
                  }}
                >
                  {serviceProviderProportionDataList.length > 0 ? (
                    <>
                      {serviceProviderProportionDataList.length <= 5 ? (
                        serviceProviderProportionDataList.map((item) => {
                          return (
                            <ProportionDataBox
                              label={item.label}
                              value={item.proportion}
                              key={item.id}
                            />
                          )
                        })
                      ) : (
                        <Slider {...settings}>
                          {serviceProviderProportionDataList.map((item) => {
                            return (
                              <ProportionDataBox
                                label={item.label}
                                value={item.proportion}
                                key={item.id}
                              />
                            )
                          })}
                        </Slider>
                      )}
                    </>
                  ) : (
                    <span className="dr_label">暂无数据</span>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="section1-view-step">
          <div className="step-svg">
            {widthDetail.stepList
              .filter((stepItem) => stepItem.orgType !== '3')
              .map((stepItem, stepIndex) => (
                <svg
                  key={stepIndex}
                  className={classNames({
                    ['active']: orgType === stepItem.orgType
                  })}
                  width={`${stepItem.width}px`}
                  height="151px"
                  viewBox={`0 0 ${stepItem.width} 151`}
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <title>svg</title>
                  <linearGradient
                    x1="50%"
                    y1="0%"
                    x2="50%"
                    y2="98.0031687%"
                    id="linearGradient-1"
                  >
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.156769012"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                  <linearGradient
                    x1="50%"
                    y1="0%"
                    x2="50%"
                    y2="100%"
                    id="linearGradient-2"
                  >
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.354539991"
                      offset="97.1836757%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                  <linearGradient
                    x1="50%"
                    y1="1.69088724%"
                    x2="50%"
                    y2="100%"
                    id="linearGradient-3"
                  >
                    <stop
                      stopColor="#000000"
                      stopOpacity="0"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.260844624"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                  <linearGradient
                    x1="50%"
                    y1="0%"
                    x2="50%"
                    y2="100%"
                    id="linearGradient-4"
                  >
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.64"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                  {selectedAssociationItem.operateEntFlag === 'platform' ? (
                    <g
                      id="地图分级"
                      stroke="none"
                      strokeWidth="1"
                      fill="none"
                      fillRule="evenodd"
                    >
                      <g
                        id="组织数据筛选-注释"
                        transform="translate(-52.000000, -262.000000)"
                      >
                        <g
                          id="编组-42备份"
                          transform="translate(52.000000, 220.000000)"
                        >
                          <g
                            id="编组-9"
                            transform="translate(0.000000, 42.000000)"
                          >
                            <rect
                              id="矩形"
                              stroke="url(#linearGradient-2)"
                              fill="url(#linearGradient-1)"
                              x="0.5"
                              y="0.5"
                              width="136"
                              height="150"
                              rx="2"
                            ></rect>
                            <path
                              d="M109.585786,140.5 C109.983611,140.5 110.365142,140.658035 110.646447,140.93934 L121.207107,151.5 L16.7928932,151.5 L27.3535534,140.93934 C27.634858,140.658035 28.0163888,140.5 28.4142136,140.5 Z"
                              id="矩形"
                              stroke="url(#linearGradient-4)"
                              fill="url(#linearGradient-3)"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </g>
                  ) : (
                    <g
                      id="地图分级"
                      stroke="none"
                      strokeWidth="1"
                      fill="none"
                      fillRule="evenodd"
                    >
                      <g
                        id="组织数据筛选-注释"
                        transform="translate(-52.000000, -1762.000000)"
                      >
                        <g
                          id="编组-42备份-2"
                          transform="translate(52.000000, 1720.000000)"
                        >
                          <g
                            id="编组-12"
                            transform="translate(0.000000, 42.000000)"
                          >
                            <rect
                              id="矩形"
                              stroke="url(#linearGradient-2)"
                              fill="url(#linearGradient-1)"
                              x="0.5"
                              y="0.5"
                              width="205"
                              height="150"
                            ></rect>
                            <path
                              d="M143.585786,140.5 C143.983611,140.5 144.365142,140.658035 144.646447,140.93934 L155.207107,151.5 L50.7928932,151.5 L61.3535534,140.93934 C61.634858,140.658035 62.0163888,140.5 62.4142136,140.5 Z"
                              id="矩形"
                              stroke="url(#linearGradient-4)"
                              fill="url(#linearGradient-3)"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </g>
                  )}
                </svg>
              ))}
            <svg
              className={classNames({ ['active']: orgType === '3' })}
              width={`${widthDetail.extraBoxWidth}px`}
              height="151px"
              viewBox={`0 0 ${widthDetail.extraBoxWidth} 151`}
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <title>企业svg</title>
              <defs>
                <linearGradient
                  x1="50%"
                  y1="0%"
                  x2="50%"
                  y2="98.0031687%"
                  id="linearGradient3-1"
                >
                  <stop stopColor="#49CCA0" stopOpacity="0" offset="0%"></stop>
                  <stop
                    stopColor="#49CCA0"
                    stopOpacity="0.156769012"
                    offset="100%"
                  ></stop>
                </linearGradient>
                <linearGradient
                  x1="50%"
                  y1="0%"
                  x2="50%"
                  y2="100%"
                  id="linearGradient3-2"
                >
                  <stop stopColor="#49CCA0" stopOpacity="0" offset="0%"></stop>
                  <stop
                    stopColor="#49CCA0"
                    stopOpacity="0.354539991"
                    offset="97.1836757%"
                  ></stop>
                  <stop
                    stopColor="#49CCA0"
                    stopOpacity="0"
                    offset="100%"
                  ></stop>
                </linearGradient>
                <linearGradient
                  x1="50%"
                  y1="1.69088724%"
                  x2="50%"
                  y2="100%"
                  id="linearGradient3-3"
                >
                  <stop stopColor="#49CCA0" stopOpacity="0" offset="0%"></stop>
                  <stop
                    stopColor="#49CCA0"
                    stopOpacity="0.260844624"
                    offset="100%"
                  ></stop>
                </linearGradient>
                <linearGradient
                  x1="50%"
                  y1="0%"
                  x2="50%"
                  y2="100%"
                  id="linearGradient3-4"
                >
                  <stop
                    stopColor="#49CCA0"
                    stopOpacity="0.64"
                    offset="0%"
                  ></stop>
                  <stop
                    stopColor="#49CCA0"
                    stopOpacity="0"
                    offset="100%"
                  ></stop>
                </linearGradient>
              </defs>
              {selectedAssociationItem.operateEntFlag === 'platform' ? (
                <g
                  id="走查"
                  stroke="none"
                  strokeWidth="1"
                  fill="none"
                  fillRule="evenodd"
                >
                  <g id="画板" transform="translate(-655.000000, -87.000000)">
                    <g id="编组-2" transform="translate(655.000000, 87.000000)">
                      <g
                        id="矩形备份-4"
                        fill="url(#linearGradient3-1)"
                        stroke="url(#linearGradient3-2)"
                      >
                        <rect
                          id="矩形备份"
                          x="0.5"
                          y="0.5"
                          width="279"
                          height="150"
                          rx="2"
                        ></rect>
                      </g>
                      <path
                        d="M180.585786,140.5 C180.983611,140.5 181.365142,140.658035 181.646447,140.93934 L192.207107,151.5 L87.7928932,151.5 L98.3535534,140.93934 C98.634858,140.658035 99.0163888,140.5 99.4142136,140.5 Z"
                        id="矩形备份-2"
                        stroke="url(#linearGradient3-4)"
                        fill="url(#linearGradient3-3)"
                      ></path>
                    </g>
                  </g>
                </g>
              ) : (
                <g
                  id="地图分级"
                  stroke="none"
                  strokeWidth="1"
                  fill="none"
                  fillRule="evenodd"
                >
                  <g
                    id="组织数据筛选-注释"
                    transform="translate(-670.000000, -2563.000000)"
                  >
                    <g
                      id="编组-42备份-9"
                      transform="translate(52.000000, 2521.000000)"
                    >
                      <g
                        id="编组-15"
                        transform="translate(618.000000, 42.000000)"
                      >
                        <g
                          id="矩形备份-3"
                          fill="url(#linearGradient3-1)"
                          stroke="url(#linearGradient3-2)"
                        >
                          <rect
                            id="矩形备份"
                            x="0.5"
                            y="0.5"
                            width="345"
                            height="150"
                          ></rect>
                        </g>
                        <path
                          d="M213.585786,140.5 C213.983611,140.5 214.365142,140.658035 214.646447,140.93934 L225.207107,151.5 L120.792893,151.5 L131.353553,140.93934 C131.634858,140.658035 132.016389,140.5 132.414214,140.5 Z"
                          id="矩形备份-2"
                          stroke="url(#linearGradient3-4)"
                          fill="url(#linearGradient3-3)"
                        ></path>
                      </g>
                    </g>
                  </g>
                </g>
              )}
            </svg>

            {selectedAssociationItem.operateEntFlag === 'platform' && (
              <svg
                className={classNames({ ['active']: orgType === '4' })}
                width={`${widthDetail.extraBoxWidth}px`}
                height="151px"
                viewBox={`0 0 ${widthDetail.extraBoxWidth} 151`}
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <title>服务商svg</title>
                <defs>
                  <linearGradient
                    x1="50%"
                    y1="0%"
                    x2="50%"
                    y2="98.0031687%"
                    id="linearGradient4-1"
                  >
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.156769012"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                  <linearGradient
                    x1="50%"
                    y1="0%"
                    x2="50%"
                    y2="100%"
                    id="linearGradient4-2"
                  >
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.354539991"
                      offset="97.1836757%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                  <linearGradient
                    x1="50%"
                    y1="1.69088724%"
                    x2="50%"
                    y2="100%"
                    id="linearGradient4-3"
                  >
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.260844624"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                  <linearGradient
                    x1="50%"
                    y1="0%"
                    x2="50%"
                    y2="100%"
                    id="linearGradient4-4"
                  >
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0.64"
                      offset="0%"
                    ></stop>
                    <stop
                      stopColor="#49CCA0"
                      stopOpacity="0"
                      offset="100%"
                    ></stop>
                  </linearGradient>
                </defs>

                <g
                  id="走查"
                  stroke="none"
                  strokeWidth="1"
                  fill="none"
                  fillRule="evenodd"
                >
                  <g id="画板" transform="translate(-655.000000, -87.000000)">
                    <g id="编组-2" transform="translate(655.000000, 87.000000)">
                      <g
                        id="矩形备份-4"
                        fill="url(#linearGradient4-1)"
                        stroke="url(#linearGradient4-2)"
                      >
                        <rect
                          id="矩形备份"
                          x="0.5"
                          y="0.5"
                          width="279"
                          height="150"
                          rx="2"
                        ></rect>
                      </g>
                      <path
                        d="M180.585786,140.5 C180.983611,140.5 181.365142,140.658035 181.646447,140.93934 L192.207107,151.5 L87.7928932,151.5 L98.3535534,140.93934 C98.634858,140.658035 99.0163888,140.5 99.4142136,140.5 Z"
                        id="矩形备份-2"
                        stroke="url(#linearGradient4-4)"
                        fill="url(#linearGradient4-3)"
                      ></path>
                    </g>
                  </g>
                </g>
              </svg>
            )}
          </div>
          <div className="step-icon">
            {widthDetail.stepList.map((stepItem) => (
              <p
                className="icon-item"
                key={stepItem.orgType}
                style={{ flex: `0 0 ${stepItem.width}px` }}
              >
                <IconFont
                  type="icon-xiangxia"
                  className={classNames('icon-xiamian', {
                    ['active']: orgType === stepItem.orgType
                  })}
                  style={{ color: '#49CCA0' }}
                />
              </p>
            ))}
            {selectedAssociationItem.operateEntFlag === 'platform' && (
              <p
                className="icon-item"
                style={{ flex: `0 0 ${widthDetail.extraBoxWidth}px` }}
              >
                <IconFont
                  type="icon-xiangxia"
                  className={classNames('icon-xiamian', {
                    ['active']: orgType === '4'
                  })}
                  style={{ color: '#49CCA0' }}
                />
              </p>
            )}
          </div>
        </div>
      </>
    )
  }
)

export default OverviewBox
